<template>
  <div class="el-custom-from">
    <el-tabs v-loading="formLoading">
      <el-tab-pane>
        <template #label>
          <div>
            <span class="font_16px">
              <i class="el-icon-edit"></i>
              {{ pageTitle }}
            </span>
          </div>
        </template>
        <div id="From_div_style" :style="autoHeight">
          <el-container>
            <el-main id="el-custom-form-main">
              <div class="container  form-container">
                <el-scrollbar>
                  <el-form
                    ref="formData"
                    :model="formModel"
                    label-width="100px"
                    class="demo-ruleForm"
                    size="mini"
                  >
                    <div v-for="item in config" :key="item.id">
                      <div v-for="(co, index) in item.conditions" :key="index">
                        <el-form-item
                          :key="item.fieldKey"
                          :label="item.label"
                          v-if="item.show && formModel[co.label] === co.value"
                          :prop="item.fieldKey"
                          :rules="item.rules"
                          class="el-from-custom-item"
                        >
                          <el-radio-group
                            v-model="formModel[item.fieldKey]"
                            size="small"
                            v-if="item.controlType == 19"
                            :disabled="!item.editor"
                          >
                            <el-radio-button
                              v-for="(child, index) in item.options"
                              :key="index"
                              :label="child.value"
                            >{{ child.label }}</el-radio-button>
                          </el-radio-group>
                          <el-select
                            v-model="formModel[item.fieldKey]"
                            v-if="item.controlType === 15"
                            :disabled="!item.editor"
                            @change="paramtersChange(item.valueField)"
                          >
                            <!-- 下拉菜单联动 -->
                            <div v-for="(child, index) in item.options" :key="index">
                              <div v-for="condit in child.conditions" :key="condit.id">
                                <el-option
                                  :class="{
                                   'el-select-options-hide':
                                      formModel[condit.label] !== condit.value,
                                  }"
                                  :key="index"
                                  :label="child.label"
                                  :value="child.value"
                                ></el-option>
                              </div>
                              <el-option
                                v-if="child.conditions.length === 0"
                                :key="index"
                                :label="child.label"
                                :value="child.value"
                              ></el-option>
                            </div>
                          </el-select>
                          <el-input
                            v-model="formModel[item.fieldKey]"
                            v-if="item.controlType === 0"
                            :disabled="!item.editor"
                          ></el-input>
                          <el-input
                            v-model.number="formModel[item.fieldKey]"
                            v-if="item.controlType === 16"
                            :disabled="!item.editor"
                          ></el-input>
                          <el-date-picker
                            type="date"
                            v-model="formModel[item.fieldKey]"
                            v-if="item.controlType === 3"
                            :disabled="!item.editor"
                          ></el-date-picker>
                          <el-date-picker
                            type="datetime"
                            v-model="formModel[item.fieldKey]"
                            v-if="item.controlType === 2"
                            :disabled="!item.editor"
                          ></el-date-picker>
                          <el-date-picker
                            type="year"
                            v-model="formModel[item.fieldKey]"
                            v-if="item.controlType === 4"
                            :disabled="!item.editor"
                          ></el-date-picker>
                          <el-date-picker
                            type="month"
                            v-model="formModel[item.fieldKey]"
                            v-if="item.controlType === 5"
                            :disabled="!item.editor"
                          ></el-date-picker>
                          <el-col :span="10">
                            <el-input
                              v-model="formModel[item.fieldKey]"
                              v-if="item.controlType === 18"
                              :disabled="!item.editor"
                              @click="innerDrawer = true"
                            ></el-input>
                          </el-col>

                          <el-button
                            plain
                            circle
                            type="primary"
                            :icon="
                              formModel[item.fieldKey] == null ||
                              formModel[item.fieldKey] == ''
                                ? 'el-icon-warning-outline'
                                : formModel[item.fieldKey]
                            "
                            v-if="item.controlType === 18"
                            :disabled="!item.editor"
                          ></el-button>
                          <el-input
                            type="textarea"
                            :rows="4"
                            v-model="formModel[item.fieldKey]"
                            v-if="item.controlType === 1"
                            :disabled="!item.editor"
                          ></el-input>
                          <!-- 人员-组织-人员-职位-权限-角色-按钮 -->
                          <div
                            v-if="
                              (item.controlType === 21 ||
                                item.controlType === 9 ||
                                item.controlType === 10 ||
                                item.controlType === 11 ||
                                item.controlType === 22 ||
                                item.controlType === 23) &&
                                item.tables.length > 0
                            "
                          >
                            <table-componets-vue
                              :isShowButton="true"
                              @tableEvent="tableEvent"
                              :tables="{
                                body: formModel[item.fieldKey],
                                header: item.tables,
                                operations:
                                  pageType != 'view' && item.editor
                                    ? item.operations
                                    : [],
                              }"
                              :Select="
                                pageType != 'view' && item.editor
                                  ? 'MultiSelect'
                                  : ''
                              "
                              :ref="item.fieldKey + '_multipleTable'"
                              :fieldkey="item"
                              :isOpertions="1 == 1"
                              :maxheight="260"
                            ></table-componets-vue>
                          </div>
                          <!-- 人员 -->

                          <!-- 多语言 -->
                          <div
                            v-if="
                              item.controlType === 17 && item.tables.length > 0
                            "
                            class="lookup_dive_css"
                          >
                            <div class="handle-box">
                              <el-button
                                :size="'mini'"
                                icon="el-icon-plus"
                                type="primary"
                                v-if="pageType != 'view'"
                                @click="
                                  AddNode(
                                    formModel[item.fieldKey],
                                    item.fieldKey
                                  )
                                "
                              >{{ $t("i18n.co_add") }}</el-button>
                            </div>
                            <el-table
                              :data="formModel[item.fieldKey]"
                              style="width: 100%"
                              border
                              max-height="380"
                              size="mini"
                              class="tb-item-location"
                            >
                              <el-table-column
                                v-for="itm in item.tables"
                                :key="itm.type"
                                :property="itm.key"
                                :label="itm.name"
                                :width="itm.width == 0 ? '' : itm.width"
                                :align="itm.align"
                              >
                                <template #header>
                                  <span v-if="itm.rules.length > 0" class="star_span">*</span>
                                  {{ itm.name }}
                                </template>
                                <template #default="scope">
                                  <el-form-item
                                    :prop="
                                      item.fieldKey +
                                        '.' +
                                        scope.$index +
                                        '.' +
                                        itm.key
                                    "
                                    :rules="itm.rules"
                                    label=" "
                                    label-width="1px"
                                  >
                                    <el-radio-group
                                      v-model="scope.row[itm.key]"
                                      :disabled="!itm.editor"
                                      v-if="itm.controlType === 19"
                                    >
                                      <el-radio-button
                                        v-for="(op, index) in itm.options"
                                        :key="index"
                                        :label="op.value"
                                      >{{ op.label }}</el-radio-button>
                                    </el-radio-group>
                                    <el-select
                                      v-model="scope.row[itm.key]"
                                      :disabled="!itm.editor"
                                      v-if="itm.controlType === 15"
                                    >
                                      <el-option
                                        v-for="(op, index) in itm.options"
                                        :key="index"
                                        :label="op.label"
                                        :value="op.value"
                                      ></el-option>
                                    </el-select>
                                    <el-input
                                      v-model="scope.row[itm.key]"
                                      v-if="itm.controlType === 1"
                                      :disabled="!itm.editor"
                                      type="textarea"
                                      :rows="4"
                                    ></el-input>
                                    <el-input
                                      v-model="scope.row[itm.key]"
                                      v-if="itm.controlType === 0"
                                      :disabled="!itm.editor"
                                    ></el-input>
                                  </el-form-item>
                                </template>
                              </el-table-column>
                              <el-table-column
                                width="60"
                                align="center"
                                label="操作"
                                v-if="pageType != 'view'"
                              >
                                <template #default="scope">
                                  <div class>
                                    <el-button
                                      type="danger"
                                      plain
                                      icon="el-icon-lx-move"
                                      size="mini"
                                      circle
                                      @click="
                                        RemoveNode(
                                          formModel[item.fieldKey],
                                          scope.row,
                                          item.fieldKey
                                        )
                                      "
                                    ></el-button>
                                  </div>
                                </template>
                              </el-table-column>
                            </el-table>
                          </div>
                          <!-- 多语言 -->

                          <!-- 多语言-row -->
                          <div
                            v-if="
                              item.controlType === 17 &&
                                item.childFields.length > 0
                            "
                            class="lookup_dive_css"
                          >
                            <div
                              v-for="(child, index0) in formModel[
                                item.fieldKey
                              ]"
                              :key="index0"
                            >
                              <el-row>
                                <div v-for="(n, index) in item.childFields" :key="index">
                                  <el-col v-if="n.show">
                                    <el-form-item
                                      :label="n.label"
                                      :prop="
                                        item.fieldKey +
                                          '.' +
                                          index0 +
                                          '.' +
                                          n.fieldKey
                                      "
                                      :rules="n.rules"
                                    >
                                      <el-select
                                        v-model="child[n.fieldKey]"
                                        v-if="n.controlType === 15"
                                        :disabled="!n.editor"
                                      >
                                        <el-option
                                          v-for="(op, index) in n.options"
                                          :key="index"
                                          :label="op.label"
                                          :value="op.value"
                                        ></el-option>
                                      </el-select>
                                      <el-input
                                        type="textarea"
                                        :rows="4"
                                        v-model="child[n.fieldKey]"
                                        v-if="n.controlType === 1"
                                        :disabled="!n.editor"
                                      ></el-input>
                                      <el-input
                                        v-model="child[n.fieldKey]"
                                        v-if="n.controlType === 0"
                                        :disabled="!n.editor"
                                      ></el-input>
                                    </el-form-item>
                                  </el-col>
                                </div>
                                <div class="form-handle-box-button-delete">
                                  <el-button
                                    v-if="pageType != 'view'"
                                    type="danger"
                                    plain
                                    icon="el-icon-lx-move"
                                    size="mini"
                                    circle
                                    @click="
                                      RemoveNode(
                                        formModel[item.fieldKey],
                                        child,
                                        item.fieldKey
                                      )
                                    "
                                  ></el-button>
                                </div>
                                <el-divider></el-divider>
                              </el-row>
                            </div>
                            <div class="form_handle-box-button">
                              <el-button
                                v-if="pageType != 'view'"
                                type="primary"
                                plain
                                icon="el-icon-plus"
                                size="mini"
                                circle
                                @click="
                                  AddNode(
                                    formModel[item.fieldKey],
                                    item.fieldKey
                                  )
                                "
                              ></el-button>
                            </div>
                          </div>
                          <!-- 多语言-row -->
                        </el-form-item>
                      </div>
                      <el-form-item
                        :key="item.fieldKey"
                        :label="item.label"
                        v-if="item.show && item.conditions.length == 0"
                        :prop="item.fieldKey"
                        :rules="item.rules"
                        class="el-from-custom-item"
                      >
                        <el-radio-group
                          v-model="formModel[item.fieldKey]"
                          size="small"
                          v-if="item.controlType == 19"
                          :disabled="!item.editor"
                        >
                          <el-radio-button
                            v-for="(child, index) in item.options"
                            :key="index"
                            :label="child.value"
                          >{{ child.label }}</el-radio-button>
                        </el-radio-group>
                        <el-select
                          v-model="formModel[item.fieldKey]"
                          v-if="item.controlType === 15"
                          :disabled="!item.editor"
                          @change="paramtersChange(item.valueField)"
                        >
                          <!-- 下拉菜单联动 -->
                          <div v-for="(child, index) in item.options" :key="index">
                            <div v-for="condit in child.conditions" :key="condit.id">
                              <el-option
                                :class="{
                                 'el-select-options-hide':
                                    formModel[condit.label] !== condit.value,
                                }"
                                :key="index"
                                :label="child.label"
                                :value="child.value"
                              ></el-option>
                            </div>
                            <el-option
                              v-if="child.conditions.length === 0"
                              :key="index"
                              :label="child.label"
                              :value="child.value"
                            ></el-option>
                          </div>
                        </el-select>
                        <el-input
                          v-model="formModel[item.fieldKey]"
                          v-if="item.controlType === 0"
                          :disabled="!item.editor"
                        ></el-input>
                        <el-input
                          v-model.number="formModel[item.fieldKey]"
                          v-if="item.controlType === 16"
                          :disabled="!item.editor"
                        ></el-input>
                        <el-date-picker
                          type="date"
                          v-model="formModel[item.fieldKey]"
                          v-if="item.controlType === 3"
                          :disabled="!item.editor"
                        ></el-date-picker>
                        <el-date-picker
                          type="datetime"
                          v-model="formModel[item.fieldKey]"
                          v-if="item.controlType === 2"
                          :disabled="!item.editor"
                        ></el-date-picker>
                        <el-date-picker
                          type="year"
                          v-model="formModel[item.fieldKey]"
                          v-if="item.controlType === 4"
                          :disabled="!item.editor"
                        ></el-date-picker>
                        <el-date-picker
                          type="month"
                          v-model="formModel[item.fieldKey]"
                          v-if="item.controlType === 5"
                          :disabled="!item.editor"
                        ></el-date-picker>
                        <el-col :span="10">
                          <el-input
                            v-model="formModel[item.fieldKey]"
                            v-if="item.controlType === 18"
                            :disabled="!item.editor"
                            @click="innerDrawer = true"
                          ></el-input>
                        </el-col>

                        <el-button
                          plain
                          circle
                          type="primary"
                          :icon="
                            formModel[item.fieldKey] == null ||
                            formModel[item.fieldKey] == ''
                              ? 'el-icon-warning-outline'
                              : formModel[item.fieldKey]
                          "
                          v-if="item.controlType === 18"
                          :disabled="!item.editor"
                        ></el-button>
                        <el-input
                          type="textarea"
                          :rows="4"
                          v-model="formModel[item.fieldKey]"
                          v-if="item.controlType === 1"
                          :disabled="!item.editor"
                        ></el-input>
                        <!-- 人员-组织-人员-职位-权限-角色-按钮 -->
                        <div
                          v-if="
                            (item.controlType === 21 ||
                              item.controlType === 9 ||
                              item.controlType === 10 ||
                              item.controlType === 11 ||
                              item.controlType === 22 ||
                              item.controlType === 23) &&
                              item.tables.length > 0
                          "
                        >
                          <table-componets-vue
                            :isShowButton="true"
                            @tableEvent="tableEvent"
                            :tables="{
                              body: formModel[item.fieldKey],
                              header: item.tables,
                              operations:
                                pageType != 'view' && item.editor
                                  ? item.operations
                                  : [],
                            }"
                            :Select="
                              pageType != 'view' && item.editor
                                ? 'MultiSelect'
                                : ''
                            "
                            :ref="item.fieldKey + '_multipleTable'"
                            :fieldkey="item"
                            :isOpertions="1 == 1"
                            :maxheight="260"
                          ></table-componets-vue>
                        </div>
                        <!-- 人员 -->

                        <!-- 多语言 -->
                        <div
                          v-if="
                            item.controlType === 17 && item.tables.length > 0
                          "
                          class="lookup_dive_css"
                        >
                          <div class="handle-box">
                            <el-button
                              :size="'mini'"
                              icon="el-icon-plus"
                              type="primary"
                              v-if="pageType != 'view'"
                              @click="
                                AddNode(formModel[item.fieldKey], item.fieldKey)
                              "
                            >{{ $t("i18n.co_add") }}</el-button>
                          </div>
                          <el-table
                            :data="formModel[item.fieldKey]"
                            style="width: 100%"
                            border
                            max-height="380"
                            size="mini"
                            class="tb-item-location"
                          >
                            <el-table-column
                              v-for="itm in item.tables"
                              :key="itm.type"
                              :property="itm.key"
                              :label="itm.name"
                              :width="itm.width == 0 ? '' : itm.width"
                              :align="itm.align"
                            >
                              <template #header>
                                <span v-if="itm.rules.length > 0" class="star_span">*</span>
                                {{ itm.name }}
                              </template>
                              <template #default="scope">
                                <el-form-item
                                  :prop="
                                    item.fieldKey +
                                      '.' +
                                      scope.$index +
                                      '.' +
                                      itm.key
                                  "
                                  :rules="itm.rules"
                                  label=" "
                                  label-width="1px"
                                >
                                  <el-radio-group
                                    v-model="scope.row[itm.key]"
                                    :disabled="!itm.editor"
                                    v-if="itm.controlType === 19"
                                  >
                                    <el-radio-button
                                      v-for="(op, index) in itm.options"
                                      :key="index"
                                      :label="op.value"
                                    >{{ op.label }}</el-radio-button>
                                  </el-radio-group>
                                  <el-select
                                    v-model="scope.row[itm.key]"
                                    :disabled="!itm.editor"
                                    v-if="itm.controlType === 15"
                                  >
                                    <el-option
                                      v-for="(op, index) in itm.options"
                                      :key="index"
                                      :label="op.label"
                                      :value="op.value"
                                    ></el-option>
                                  </el-select>
                                  <el-input
                                    v-model="scope.row[itm.key]"
                                    v-if="itm.controlType === 1"
                                    :disabled="!itm.editor"
                                    type="textarea"
                                    :rows="4"
                                  ></el-input>
                                  <el-input
                                    v-model="scope.row[itm.key]"
                                    v-if="itm.controlType === 0"
                                    :disabled="!itm.editor"
                                  ></el-input>
                                </el-form-item>
                              </template>
                            </el-table-column>
                            <el-table-column
                              width="60"
                              align="center"
                              label="操作"
                              v-if="pageType != 'view'"
                            >
                              <template #default="scope">
                                <div class>
                                  <el-button
                                    type="danger"
                                    plain
                                    icon="el-icon-lx-move"
                                    size="mini"
                                    circle
                                    @click="
                                      RemoveNode(
                                        formModel[item.fieldKey],
                                        scope.row,
                                        item.fieldKey
                                      )
                                    "
                                  ></el-button>
                                </div>
                              </template>
                            </el-table-column>
                          </el-table>
                        </div>
                        <!-- 多语言 -->

                        <!-- 多语言-row -->
                        <div
                          v-if="
                            item.controlType === 17 &&
                              item.childFields.length > 0
                          "
                          class="lookup_dive_css"
                        >
                          <div v-for="(child, index0) in formModel[item.fieldKey]" :key="index0">
                            <el-row>
                              <div v-for="(n, index) in item.childFields" :key="index">
                                <el-col v-if="n.show">
                                  <el-form-item
                                    :label="n.label"
                                    :prop="
                                      item.fieldKey +
                                        '.' +
                                        index0 +
                                        '.' +
                                        n.fieldKey
                                    "
                                    :rules="n.rules"
                                  >
                                    <el-radio-group
                                      v-model="scope.row[itm.key]"
                                      :disabled="!itm.editor"
                                      v-if="itm.controlType === 19"
                                    >
                                      <el-radio-button
                                        v-for="(op, index) in itm.options"
                                        :key="index"
                                        :label="op.value"
                                      >{{ op.label }}</el-radio-button>
                                    </el-radio-group>
                                    <el-select
                                      v-model="child[n.fieldKey]"
                                      v-if="n.controlType === 15"
                                      :disabled="!n.editor"
                                    >
                                      <el-option
                                        v-for="(op, index) in n.options"
                                        :key="index"
                                        :label="op.label"
                                        :value="op.value"
                                      ></el-option>
                                    </el-select>
                                    <el-input
                                      type="textarea"
                                      :rows="4"
                                      v-model="child[n.fieldKey]"
                                      v-if="n.controlType === 1"
                                      :disabled="!n.editor"
                                    ></el-input>
                                    <el-input
                                      v-model="child[n.fieldKey]"
                                      v-if="n.controlType === 0"
                                      :disabled="!n.editor"
                                    ></el-input>
                                  </el-form-item>
                                </el-col>
                              </div>
                              <div class="form-handle-box-button-delete">
                                <el-button
                                  v-if="pageType != 'view'"
                                  type="danger"
                                  plain
                                  icon="el-icon-lx-move"
                                  size="mini"
                                  circle
                                  @click="
                                    RemoveNode(
                                      formModel[item.fieldKey],
                                      child,
                                      item.fieldKey
                                    )
                                  "
                                ></el-button>
                              </div>
                              <el-divider></el-divider>
                            </el-row>
                          </div>
                          <div class="form_handle-box-button">
                            <el-button
                              v-if="pageType != 'view'"
                              type="primary"
                              plain
                              icon="el-icon-plus"
                              size="mini"
                              circle
                              @click="
                                AddNode(formModel[item.fieldKey], item.fieldKey)
                              "
                            ></el-button>
                          </div>
                        </div>
                        <!-- 多语言-row -->
                        <!-- 用户头像 -->
                        <div class="user-avator" v-if="item.controlType === 24">
                          <el-button
                            class="user-avator-btn"
                            :disabled="!item.editor"
                            @click="changePhoto(item.fieldKey)"
                          >
                            <el-avatar
                              size="medium"
                              :src="formModel[item.fieldKey + '_src']"
                              :disabled="!item.editor"
                            ></el-avatar>
                          </el-button>
                        </div>
                      </el-form-item>
                    </div>
                  </el-form>
                </el-scrollbar>
              </div>
            </el-main>
            <el-footer>
              <div class="form_handle-box">
                <el-button
                  v-if="pageType != 'view' && pageType != null"
                  plain
                  type="primary"
                  @click="SaveEvent()"
                  size="mini"
                >{{ $t("table.Global_Save") }}</el-button>

                <el-button
                  plain
                  type="danger"
                  @click="BackEvent()"
                  size="mini"
                >{{ $t("table.Global_Back") }}</el-button>
              </div>
            </el-footer>
          </el-container>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="el-dialog-content">
      <el-drawer
        :title="$t('menu.ICON_SELECT')"
        :append-to-body="true"
        v-model="innerDrawer"
        size="20%"
        :withHeader="false"
      >
        <IconSelectVue @IconSelected="IconSelected" :icon="formModel.icon" ref="iconRef"></IconSelectVue>
      </el-drawer>
      <dialog-permissio-n-componet-vue ref="dialogPermission" @confirmEvent="dialogConfirmEvent"></dialog-permissio-n-componet-vue>
      <dialog-buttons-componet-vue ref="dialogButton" @confirmEvent="dialogConfirmEvent"></dialog-buttons-componet-vue>
      <dialog-position-componet-vue ref="positions" @confirmEvent="dialogConfirmEvent"></dialog-position-componet-vue>
      <dialog-org-componet-vue ref="Org" @confirmEvent="dialogConfirmEvent"></dialog-org-componet-vue>
      <dialog-employee-componet-vue ref="emp" @confirmEvent="dialogConfirmEvent"></dialog-employee-componet-vue>
      <dialog-table-info-componet-vue ref="tableinfo" @confirmEvent="dialogConfirmEvent"></dialog-table-info-componet-vue>
      <dialog-photo-componet-vue ref="photo" @loadphoto="CropAvator"></dialog-photo-componet-vue>
    </div>
  </div>
</template>
<script>
import reqVue from "../utils/req.vue";
import IconSelectVue from "../components/IconSelect.vue";
import TableComponetsVue from "./TableComponets.vue";
import DialogPermissioNComponetVue from "./DialogPermissioNComponet.vue";
import DialogButtonsComponetVue from "./DialogButtonsComponet.vue";
import DialogPositionComponetVue from "./DialogPositionComponet.vue";
import DialogOrgComponetVue from "./DialogOrgComponet.vue";
import DialogEmployeeComponetVue from "./DialogEmployeeComponet.vue";
import DialogTableInfoComponetVue from "./DialogTableInfoComponet.vue";
import DialogPhotoComponetVue from "./DialogPhotoComponet.vue";

let windowHeight = parseInt(window.innerHeight);
export default {
  props: {
    pageTitle: {
      type: String
    },
    pageType: {
      type: String
    },
    inModel: {
      type: Object
    },
    apipath: {
      type: String
    },
    getway: {
      type: String
    }
  },
  data() {
    return {
      autoHeight: {
        height: "",
        width: "96%",
        margin: "11px",
        float: "left"
      },
      config: [],
      formModel: {},
      contentHeight: {
        height: ""
      },
      formLoading: false,
      singeData: {},
      innerDrawer: false,
      dialogInPut: {},
      exceptParamters: {},
      way: this.getway,
      api: this.apipath
    };
  },
  components: {
    IconSelectVue,
    TableComponetsVue,
    DialogPermissioNComponetVue,
    DialogButtonsComponetVue,
    DialogPositionComponetVue,
    DialogOrgComponetVue,
    DialogEmployeeComponetVue,
    DialogTableInfoComponetVue,
    DialogPhotoComponetVue
  },
  methods: {
    ///设置窗台的高度
    getHeight() {
      this.autoHeight.height = windowHeight - 60 + "px";
      this.contentHeight.height = windowHeight - 200 + "px";
    },

    ///加载表单字段
    LoadConfig(btn, page) {
      this.formLoading = true;
      let par = "";
      if (page == undefined) {
        if (this.pageType != undefined && this.pageType != null) {
          par = "/" + this.pageType;
        }
      } else {
        par = "/" + page;
      }
      reqVue.$Post(null, this.api + "/v1.0/config" + par, this.way).then(
        function(data) {
          if (data.status) {
            this.config = data.body;
            this.LoadModel(btn == undefined ? this.inModel : btn);
          }
        }.bind(this)
      );
    },
    ///加载表单数据
    LoadModel(btn) {
      reqVue
        .$Post(null, this.api + "/v1.0/get/" + btn.primaryKeyValue, this.way)
        .then(
          function(data) {
            if (data.status) {
              this.formModel = data.body;
              this.config.forEach(element => {
                if (element.controlType === 24) {
                  this.InitPhoto(
                    btn.primaryKeyValue,
                    element.fieldKey + "_src"
                  );
                }
              });
              this.formLoading = false;
              this.$refs["formData"].resetFields();
            }
          }.bind(this)
        );
    },
    ///图标选择
    IconSelected(item) {
      this.formModel.icon = item;
      this.innerDrawer = false;
    },
    ///数据保存
    SaveEvent() {
      this.$refs["formData"].validate(valid => {
        if (valid) {
          this.$emit("FormEvent", this.formModel);
        } else {
          this.formLoading = false;
          return false;
        }
      });
    },
    ///返回时
    BackEvent() {
      this.$emit("FormEvent", null);
    },
    ///表格字段添加节点
    AddNode(childFields, key) {
      reqVue.$Post(null, this.api + "/v1.0/template/" + key, this.way).then(
        function(data) {
          if (data.status) {
            childFields.push(data.body);
          }
        }.bind(this)
      );
    },
    ///表格字段移除节点
    RemoveNode(childFields, child, key) {
      var index = childFields.indexOf(child);
      if (index !== -1) {
        childFields.splice(index, 1);
      }
      if (childFields.length <= 0) {
        this.AddNode(childFields, key);
      }
    },
    ///表格字段中的方法
    tableEvent(item) {
      this.dialogAddEvent(item);
      this.dialogDeleteEvent(item);
    },
    ///弹出框中的事件
    dialogConfirmEvent(res) {
      this.formModel[res.key.fieldKey] = res.result;
      if (res.key.controlType === 21) {
        this.$refs.dialogPermission.dialogTableVisible = false;
      }
      if (res.key.controlType === 22) {
        this.$refs.dialogButton.dialogButtonsTableVisible = false;
      } ///表格信息
      if (res.key.controlType === 23) {
        if (res.key.results !== undefined)
          res.key.results.forEach(element => {
            if (res.result.length > 0) {
              this.formModel[element.label] = res.result[0][element.value];
              if (
                res.result[0][element.value] == "employee" ||
                res.result[0][element.value] == "position" ||
                res.result[0][element.value] == "organization"
              )
                this.formModel.special = res.result[0][element.value];
              else this.formModel.special = "special";
            } else {
              this.formModel.special = "";
            }
          });
      }
    },
    ///表格字段新增后事件
    dialogAddEvent(item) {
      if (item.data.value == "add") {
        if (item.key.controlType === 21) {
          this.$refs.dialogPermission.paramters = {
            fieldKey: item.key,
            data: this.formModel[item.key.fieldKey]
          };
          this.$refs.dialogPermission.dialogTableVisible = true;
          this.$refs.dialogPermission.InitTable(null);
        }
        if (item.key.controlType === 22) {
          this.$refs.dialogButton.paramters = {
            fieldKey: item.key,
            data: this.formModel[item.key.fieldKey]
          };
          this.$refs.dialogButton.dialogButtonsTableVisible = true;
          this.$refs.dialogButton.InitTable(null);
        }
        if (item.key.controlType === 11) {
          if (item.key.exceptDataField.length > 0) {
            item.key.exceptDataField.forEach(element => {
              element.value = this.formModel[element.label];
              if (
                this.formModel[element.label] == 0 ||
                this.formModel[element.label] == ""
              ) {
                element.value =
                  this.exceptParamters[element.label] == undefined
                    ? 0
                    : this.exceptParamters[element.label];
              }
            });
          }
          this.$refs.positions.paramters = {
            fieldKey: item.key,
            data: this.formModel[item.key.fieldKey],
            exceptDataField: item.key.exceptDataField
          };
          this.$refs.positions.dialogPosVisible = true;
          this.$refs.positions.InitData();
        }
        if (item.key.controlType === 9) {
          if (item.key.exceptDataField.length > 0) {
            item.key.exceptDataField.forEach(element => {
              element.value = this.formModel[element.label];
              if (
                this.formModel[element.label] == 0 ||
                this.formModel[element.label] == ""
              ) {
                element.value =
                  this.exceptParamters[element.label] == undefined
                    ? 0
                    : this.exceptParamters[element.label];
              }
            });
          }
          this.$refs.emp.paramters = {
            fieldKey: item.key,
            data: this.formModel[item.key.fieldKey],
            exceptDataField: item.key.exceptDataField
          };
          this.$refs.emp.dialogEmpVisible = true;
          this.$refs.emp.InitData();
        }
        if (item.key.controlType === 10) {
          this.$refs.Org.paramters = {
            fieldKey: item.key,
            data: this.formModel[item.key.fieldKey]
          };
          this.$refs.Org.dialogOrgVisible = true;
          this.$refs.Org.InitData();
        }
        ///表信息字段
        if (item.key.controlType === 23) {
          if (item.key.exceptDataField.length > 0) {
            item.key.exceptDataField.forEach(element => {
              element.value = this.formModel[element.label];
              if (
                this.formModel[element.label] == 0 ||
                this.formModel[element.label] == ""
              ) {
                element.value =
                  this.exceptParamters[element.label] == undefined
                    ? ""
                    : this.exceptParamters[element.label];
              }
            });
          }
          if (item.key.paramters.length > 0) {
            item.key.paramters.forEach(element => {
              if (!element.fixedValeu) {
                element.value = this.formModel[element.label];
                if (
                  this.formModel[element.label] == 0 ||
                  this.formModel[element.label] == ""
                ) {
                  element.value =
                    this.exceptParamters[element.label] == undefined
                      ? ""
                      : this.exceptParamters[element.label];
                }
              }
            });
          }
          this.$refs.tableinfo.paramters = {
            fieldKey: item.key,
            data: this.formModel[item.key.fieldKey],
            exceptDataField: item.key.exceptDataField,
            paramters: item.key.paramters
          };
          this.$refs.tableinfo.dialogTableInfoVisible = true;
          this.$refs.tableinfo.InitTable(null);
        }
      }
    },
    ///表格字段删除节点后事件
    dialogDeleteEvent(item) {
      if (item.data.value == "delete") {
        let tables = this.$refs[item.key.fieldKey + "_multipleTable"]
          .tableResult;
        tables.forEach(element => {
          var index = this.formModel[item.key.fieldKey].indexOf(element);
          if (index !== -1) {
            this.formModel[item.key.fieldKey].splice(index, 1);
          }
        });
      }
    },
    paramtersChange(fields) {
      if (fields != "" && fields != null && fields != undefined)
        this.formModel[fields] = "";
    },
    ///点击头像事件
    changePhoto(fieldKey) {
      this.$refs.photo.cropImg = this.formModel[fieldKey + "_src"];
      this.$refs.photo.isfrom = true;
      this.$refs.photo.fieldKey = fieldKey;
      this.$refs.photo.dialogPhotoVisible = true;
    },
    ///裁剪后头像事件
    CropAvator(photo) {
      if (photo !== undefined && photo !== null) {
        this.formModel[photo.fieldKey + "_src"] = photo.photo;
        this.formModel[photo.fieldKey] = photo.photoid;
      }
    },
    ///初始化头像
    InitPhoto(empid, key) {
      reqVue.$Post(null, "file/v1.0/photo/" + empid, "doc").then(
        function(data) {
          if (data.status) {
            if (data.body !== "") this.formModel[key] = data.body;
          } else {
            this.$message.error(data.message);
          }
        }.bind(this)
      );
    }
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  created() {
    this.LoadConfig();
  }
};
</script> 
